<template>
	<div class="BackstageOrder">
		<div class="head">
			查看订单
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage')">BACK</button>
			<div class="clear"></div>
		</div>
		<div class="body">
			<Tabs type="card">
				<TabPane :label="label" >
					<div v-for="(item,i) in NotAccepted" >
						<Card :bordered="false">
							<p slot="title">{{item.creattime}} 的订单</p>
							<div v-for="name in item.order">
								<p class="nubmer"> X {{name.number}}</p>
								<p class="textheight">{{name.commodity_name}}</p>
								<div class="clear"></div>
							</div>
							<p class="textheight nubmer" >总价 ：{{item.price}} 元</p>
							<div class="rightbtn">
								<Button @click="receiving(item)">接单</Button>
							</div>
							<div class="clear"></div>
						</Card>
					</div>
				</TabPane>
				<TabPane label="已接订单" >
					<div v-for="(item,i) in Accepted" >
						<div  class="order">
							<Card :bordered="false">
								<p slot="title">{{item}}</p>
								<p>{{i}} </p>
								<div class="clear"></div>
							</Card>
						</div>
					</div>
				</TabPane>
				<TabPane label="历史订单" >
					<div v-for="(item,i) in Completed" >
						<div  class="order">
							<Card :bordered="false">
								<p slot="title">{{item.creattime}}的订单</p>
								<p>{{item.price}} 元</p>
								<div class="clear"></div>
							</Card>
						</div>
					</div>
				</TabPane>
			</Tabs>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				NotAccepted:[1],
				Accepted:[],
				Completed:[],
				remind:5,
				label: (h) => {
					return h('div', [
						h('span', '未接订单'),
						h('Badge', {
							props: {
								count: this.remind
							}
						})
					])
				}
			}
		},
		methods:{
			async receiving(item){
				console.log(item.id)
				// let data = await this.$axios.post('',item.id).then(r=>r.data)
			},
		},
		async mounted() {
			let data = await this.$axios.post('Shop/index/ViewOrder',this.$store.state.id).then(r=>r.data)
			console.log(data)
			this.remind = data.NotAccepted.length
			this.NotAccepted = data.NotAccepted
		}
	}
</script>

<style lang="less">
	.BackstageOrder{
		max-width: 700px;
		margin: auto;
		.head {
			max-width: 700px;
			height: 35px;
			color: aliceblue;
			width: 100%;
			background: rgb(45,140,240);
			font-size: 22px;
			text-align: center;
			padding-right: 84px;
			line-height: 35px;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear {
			clear: both;
		}
		.btn1 {
			background: aliceblue;
			line-height: 22px;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: rgb(45,140,240);
			height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.body{
			max-width: 700px;
			margin: auto;
			padding: 5px;
			position: absolute;
			bottom: 0;
			right: 0;
			left: 0;
			top: 35px;
			background: #BBBBBB;
		}
		.order{
			background:#eee;
			margin-bottom: 5px;
		}
		.rightbtn{
			width: 100%;
			text-align: right;
			margin-top: 20px;
		}
		.clear{
			clear: both;
		}
		.textheight{
			height: 20px;
			font-size: 16px;
		}
		.nubmer{
			float: right;
		}
	}
</style>